/*
  学习目标：生命周期-卸载阶段
  场景: 常用来清除定时器 解除监听的事件

*/
import React, { Component } from 'react';

export default class App extends Component {
  state = { isShow: true };

  render() {
    const { isShow } = this.state;
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ isShow: !isShow });
          }}
        >
          点我+1
        </button>
        {isShow && <Child></Child>}
      </div>
    );
  }
}

class Child extends React.Component {
  fn = function () {
    console.log('窗口改变了  ----->  ');
  };
  // 对标： beforeDestroy
  // 场景： 清除定时器、
  componentWillUnmount() {
    window.removeEventListener('resize', this.fn);
  }

  componentDidMount() {
    window.addEventListener('resize', this.fn);
  }

  render() {
    return <div>Child</div>;
  }
}
